<template>
  <div class="app-container">
    <el-form ref="form">
      <el-row :gutter="10" class="mb8">
        <el-col :span="4">
          <el-select
            name="日志"
            placeholder="路径"
            size="small"
            style="width: 100%"
            v-model="host"
            @change="hostChangeHandler"
          >
            <el-option
              v-for="host in hostList"
              :key="host.host"
              :label="host.host"
              :value="host.host"
            />
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-select
            placeholder="日志"
            size="small"
            style="width: 100%"
            v-model="log"
            @change="logChangeHandler"
          >
            <el-option
              v-for="log in logList"
              :key="log"
              :label="log"
              :value="log"
            />
          </el-select>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            style="left: 20px"
            size="mini"
            @click="flushHandler"
            >刷新</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" size="mini" @click="clearHandler"
            >清空</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button type="primary" size="mini" @click="downHandler"
            >下载</el-button
          >
        </el-col>
      </el-row>

      <el-row :gutter="10" class="mb8">
        <el-col :span="24">
          <el-input type="textarea" id="content"></el-input>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import {
  getNodeInfos,
  getHostLogList,
  getLogContent,
  clearLogContent,
  getDownUrl,
} from "@/api/console";

export default {
  components: {},
  data() {
    return {
      hostList: [],
      logList: [],
      host: this.hostP,
      dir: this.dirP,
      log: this.logP,
    };
  },
  props: {
    hostP: "",
    dirP: "",
    logP: "",
  },
  created() {
    this.getHostList();
  },
  mounted() {
    document.getElementById("content").style.height =
      window.innerHeight * 0.725 + "px";
  },
  methods: {
    getHostList() {
      getNodeInfos().then((res) => {
        this.hostList = res.data;
        if (this.hostList && this.hostList.length > 0) {
          if (this.host === "") {
            this.host = this.hostList[0].host;
          }
          this.getLogList();
        }
      });
    },
    getLogList(flag) {
      if (this.host === "") {
        return;
      }
      getHostLogList(this.host, this.dir).then((res) => {
        this.logList = res.data;
        if (this.logList && this.logList.length > 0) {
          if (this.log === "" || flag) {
            this.log = this.logList[0];
          }
          this.getLogContent();
        }
      });
    },
    getLogContent() {
      if (this.log === "") {
        return;
      }
      if (this.host === "") {
        return;
      }
      getLogContent(this.host, this.log).then((res) => {
        //日志数据量太大，原生操作，提高性能
        document.getElementById("content").value = res.data;
      });
    },
    hostChangeHandler() {
      this.getLogList(true);
    },
    logChangeHandler() {
      this.getLogContent();
    },
    flushHandler() {
      this.getLogContent();
    },
    clearHandler() {
      this.$confirm("是否确认清空日志?", "确定", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return clearLogContent(this.host, this.log);
        })
        .then((res) => {
          this.msgSuccess("操作成功");
          document.getElementById("content").value = "";
        });
    },
    downHandler() {
      if (this.log === "") {
        return;
      }
      if (this.host === "") {
        return;
      }
      this.$confirm("是否确认下载日志?", "确定", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          return getLogContent(this.host, this.log);
        })
        .then((res) => {
          let aLink = document.createElement("a");
          aLink.style.display = "none";
          aLink.href = getDownUrl(this.host, this.log);
          const index = this.log.lastIndexOf("/");
          aLink.setAttribute("download", this.log.substring(index + 1)); // 下载的文件
          document.body.appendChild(aLink);
          aLink.click();
          document.body.removeChild(aLink);
        });
    },
  },
};
</script>